<template>
  <div>
    <div
      v-bind:style="{ width: width, height: height, backgroundColor: bgColor }"
    ></div>
    <div
      :style="{ width: width, height: height, backgroundColor: bgColor }"
    ></div>
    <!-- :属性名="变量" -->
    <!-- :class="['类名1','类名2']" -->
    <!-- :class="{类名1:布尔值,类名2:布尔值}" -->
    <!-- 数组的写法 -->
    <div v-bind:class="['box', 'box1']"></div>
    <!-- 对象的写法 -->
    <div v-bind:class="{ box: false, box1: true }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bgColor: "pink",
      width: "200px",
      height: "200px",
    };
  },
};
</script>

<style scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: blue;
}

.box1 {
  width: 300px;
  height: 300px;
  background-color: red;
}
</style>
